<script setup>
	import { ref, onMounted } from 'vue';
	import { useUserStore } from '@/store/userInfo'

	const userStore = useUserStore( )
	const merchantJoinCo = uniCloud.importObject( 'merchantJoin' )

	// 商户类型
	const merchantType = ref( null );
	const merchantTypes = [ '餐饮', '零售', '服饰', '其他' ];

	// 表单数据
	const formData = ref( {
		shopName: '',
		contactPerson: '',
		phone: '',
		address: ''
	} );

	// 处理 picker 选择变化
	const handlePickerChange = ( event ) => {
		merchantType.value = event.detail.value;
	};

	// 检查登录状态
	const checkLogin = ( ) => {
		if ( !userStore.userInfo.uid ) {
			uni.showToast( {
				title: '请先登录',
				icon: 'none'
			} )
			setTimeout( ( ) => {
				uni.reLaunch( {
					url: '/pages/login/login'
				} )
			}, 1500 )
			return false
		}
		return true
	}

	// 提交申请
	const submitApplication = async ( ) => {
		// 检查登录状态
		if ( !userStore.userInfo.uid ) {
			uni.showToast( {
				title: '请先登录',
				icon: 'none'
			} )
			setTimeout( ( ) => {
				uni.reLaunch( {
					url: '/pages/login/login'
				} )
			}, 1500 )
			return
		}

		// 检查商户类型是否选择
		if ( merchantType.value === null ) {
			uni.showToast( {
				title: '请选择商户类型',
				icon: 'none'
			} );
			return;
		}

		// 检查其他字段是否填写
		const { shopName, contactPerson, phone, address } = formData.value
		if ( !shopName || !contactPerson || !phone || !address ) {
			uni.showToast( {
				title: '请填写完整信息',
				icon: 'none'
			} );
			return;
		}

		try {
			uni.showLoading( {
				title: '提交中...',
				mask: true
			} )

			const result = await merchantJoinCo.submitApplication( {
				uid: userStore.userInfo.uid,
				merchantType: parseInt( merchantType.value ),
				...formData.value
			} )

			uni.hideLoading( )

			if ( result.errCode === 0 ) {
				uni.showToast( {
					title: '提交成功',
					icon: 'success'
				} )
				// 延迟返回上一页
				setTimeout( ( ) => {
					uni.navigateBack( )
				}, 1500 )
			} else {
				uni.showToast( {
					title: result.errMsg,
					icon: 'none'
				} )
			}
		} catch ( error ) {
			uni.hideLoading( )
			uni.showToast( {
				title: '提交失败，请稍后重试',
				icon: 'none'
			} )
			console.error( '提交商户加盟申请失败:', error )
		}
	}

	// 页面加载时检查申请状态
	onMounted( async ( ) => {
		if ( !userStore.userInfo.uid ) {
			uni.showToast( {
				title: '请先登录',
				icon: 'none'
			} )
			setTimeout( ( ) => {
				uni.reLaunch( {
					url: '/pages/login/login'
				} )
			}, 1500 )
			return
		}

		try {
			const result = await merchantJoinCo.getApplicationStatus( userStore.userInfo.uid )
			if ( result.errCode === 0 && result.data ) {
				// 如果已经有申请记录
				const statusText = {
					0: '审核中',
					1: '已通过',
					2: '已拒绝'
				}
				uni.showModal( {
					title: '提示',
					content: `您已提交过申请，当前状态：${statusText[result.data.state]}`,
					showCancel: false,
					success: ( ) => {
						uni.navigateBack( )
					}
				} )
			}
		} catch ( error ) {
			console.error( '获取申请状态失败:', error )
		}
	} )
</script>

<template>
	<view class="merchant-join">
		<!-- 加盟说明 -->
		<view class="join-desc">
			<view class="title">
				<text class="icon">📢</text>
				<text>加盟说明</text>
			</view>
			<view class="desc-content">
				<view class="desc-item">· 需要提供营业执照等相关资质</view>
				<view class="desc-item">· 店铺需要有固定经营场所</view>
				<view class="desc-item">· 提交申请后将有专人与您联系</view>
				<view class="desc-item">· 审核通过后即可入驻平台</view>
			</view>
		</view>

		<!-- 申请表单 -->
		<view class="form-container">
			<form @submit="submitApplication">
				<!-- 商户类型 -->
				<view class="form-item">
					<view class="label">商户类型</view>
					<picker :range="merchantTypes" @change="handlePickerChange">
						<view class="picker">
							<text>{{ merchantTypes[merchantType] || '请选择商户类型' }}</text>
							<uni-icons custom-prefix="iconfont" type="yuan-a-ArrowRight2" color="#ced4da"
								:size="20" />
						</view>
					</picker>
				</view>

				<view class="divider"></view>

				<!-- 店铺名称 -->
				<view class="form-item">
					<view class="label">店铺名称</view>
					<input type="text" v-model="formData.shopName" placeholder="请输入店铺名称" />
				</view>

				<view class="divider"></view>

				<!-- 联系人 -->
				<view class="form-item">
					<view class="label">联系人</view>
					<input type="text" v-model="formData.contactPerson" placeholder="请输入联系人姓名" />
				</view>

				<view class="divider"></view>

				<!-- 联系电话 -->
				<view class="form-item">
					<view class="label">联系电话</view>
					<input type="number" v-model="formData.phone" placeholder="请输入联系电话" />
				</view>

				<view class="divider"></view>

				<!-- 店铺地址 -->
				<view class="form-item address-item">
					<view class="label">店铺地址</view>
					<textarea v-model="formData.address" placeholder="请输入店铺详细地址" />
				</view>
			</form>
		</view>

		<!-- 提交按钮 - 独立于表单容器 -->
		<view class="btn-container">
			<button class="submit-btn" @tap="submitApplication">提交申请</button>
		</view>
	</view>
</template>


<style lang="scss" scoped>
	.merchant-join {
		min-height: 100vh;
		padding: 24rpx;
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		background-color: $page-bg-color;

		// 加盟说明
		.join-desc {
			margin-bottom: 24rpx;
			padding: 24rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.title {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				font-size: 32rpx;
				color: $text-font-color-1;
				font-weight: 600;

				.icon {
					margin-right: 8rpx;
				}
			}

			.desc-content {
				.desc-item {
					margin-bottom: 12rpx;
					font-size: 26rpx;
					color: $text-font-color-3;
					line-height: 1.6;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}

		// 表单容器
		.form-container {
			padding: 0 24rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.form-item {
				display: flex;
				align-items: center;
				padding: 24rpx 0;

				.label {
					width: 160rpx;
					font-size: 28rpx;
					color: $text-font-color-1;
				}

				input {
					flex: 1;
					font-size: 28rpx;
					color: $text-font-color-2;

					&::placeholder {
						color: $text-font-color-4;
					}
				}

				.picker {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					color: $text-font-color-2;
				}
			}

			.address-item {
				align-items: flex-start;

				textarea {
					flex: 1;
					height: 120rpx;
					font-size: 28rpx;
					color: $text-font-color-2;

					&::placeholder {
						color: $text-font-color-4;
					}
				}
			}

			.divider {
				height: 2rpx;
				background-color: $line-color-aux;
			}
		}

		// 按钮容器 - 独立样式
		.btn-container {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 24rpx;
			padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
			background-color: #fff;
			box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);

			.submit-btn {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background-color: $brand-theme-color;
				color: #fff;
				font-size: 32rpx;
				font-weight: 500;
				border-radius: 44rpx;
				border: none;

				&:active {
					opacity: 0.9;
				}
			}
		}
	}
</style>